<template>
	<view>
		<!-- 搜索 -->
		<view class="search">
			<view class="scan">
				<image class="widgets-img" src="../../static/image/ai3.png" mode="aspectFit"></image>
			</view>
			<view class="search-input">
				<image class="search-icon" src="../../static/image/ath.png" mode="aspectFit"></image>
				<input class="serach-text" type="text" placeholder="搜索商品">
			</view>
			<view class="scan">
				<image class="widgets-img" src="../../static/image/ahv.png" mode="aspectFit"></image>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="indicator-wrap">
			<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
				circular="true" indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="#fff">
				<swiper-item v-for="(item,index) in swipers">
					<image class="swiper-item" :src="item.image" mode="aspectFill" />
				</swiper-item>

			</swiper>
		</view>
		<!-- 图标分类 -->
		<view class="big-logo">
			<view class="logoinfo" v-for="(item,index) in logos">
				<image class="logo_image" :src="item.image" mode="aspectFit"></image>
				<text class="logotext">{{item.title}}</text>
			</view>

		</view>
		<!-- 掌上秒杀 -->
		<view class="page-margin">
			<view class="page-row">
				<image class="theme_img" src="/static/image/bej.png" mode="aspectFill"></image>
				<view class="theme_more">
					<text>更多秒杀</text>
					<image src="/static/image/arrowright.png" mode=""></image>
				</view>
			</view>
			<scroll-view class="theme_scroll" scroll-x="true">
				<view class="page-itemout">
					<view class="page-column" v-for="(item,index) in quicks">
						<image :src="item.image" mode="aspectFill" />
						<text>{{item.price}}</text>
					</view>
				</view>

			</scroll-view>

		</view>
		
		<!-- 会场分类 -->
		<view class="page-outview">
			<view class='page-huichang-in' v-for="(page,index) in pageRow">
			    <image class='page_huichang-img' v-for="item in page" :src="item" mode="aspectFill"></image>
			</view>
		</view>

	</view>
</template>

<script>
	import data_jhf from "../../utils/data_jhf.js"
	export default {
		data() {
			return {
				swipers: [],
				logos: [],
				quicks: [],
				pageRow: [],
				indicatorDots: true,
				vertical: false,
				autoplay: true,
				interval: 3000,
				duration: 500
			}
		},
		methods: {

		},
		onLoad() {
			uni.showLoading({
				title: '加载中',
				mask: false
			}); 			
			setTimeout(() => {
				uni.hideLoading()
				
				console.log(data_jhf)
				
				this.swipers = data_jhf.homepage.swipers
				this.logos = data_jhf.homepage.logos,
				this.quicks = data_jhf.homepage.quicks,
				this.pageRow = data_jhf.homepage.pageRow
				
				
			}, 1000);
		}
	}
</script>

<style>

	.search {
		display: flex;
		flex-direction: row;
		height: 60upx;
		align-items: center;
	}

	.widgets-img {
		width: 40upx;
		height: 40upx;
	}

	.search-icon {
		width: 30upx;
		height: 30upx;
	}

	.scan {
		display: flex;
		width: 10%;
		height: 100%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.search-input {
		display: flex;
		align-items: center;
		width: 80%;
		background-color: white;
		height: 100%;
		border-radius: 8upx;
	}

	.search-icon {
		margin-left: 10upx;
	}

	.serach-text {
		height: 100%;
		margin-left: 5upx;
	}

	.indicator-wrap {
		width: 100%;
		height: auto;
		margin-top: 15upx;
	}

	.swiper-item {
		display: block;
		width: 100%;
		height: 325rpx;
	}

	.big-logo {
		padding-top: 20upx;
		padding-bottom: 20upx;
		width: 100%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		background-color: white;
	}

	.logoinfo {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 150upx;
		height: 150upx;
	}

	.logo_image {
		width: 100upx;
		height: 100upx;
	}

	.logotext {
		text-align: center;
		color: #aaa;
		font-size: 22upx;
	}

	.page-margin {
		margin-top: 30upx;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.page-row {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100upx;
	}

	.theme_img {
		width: 180rpx;
		height: 40rpx;
	}

	.theme_more {
		display: flex;
		height: 40rpx;
		align-items: center;
		margin-right: 20upx;
	}

	.theme_more text {
		margin-right: 2px;
		font-size: 22rpx;
		color: #aaa;
	}

	.theme_more image {
		width: 22rpx;
		height: 22rpx;
	}

	.theme_scroll {
		width: 100%;
		margin-top: 10upx;
		white-space: nowrap;
	}

	.page-itemout {
		display: flex;
		flex-direction: row;
	}

	.page-column {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20upx;
	}

	.page-column image {
		width: 170rpx;
		height: 170rpx;
	}

	.page-column text {
		font-size: 32rpx;
		color: #FF0000;
		margin-top: 10rpx;
	}

	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
	.page-outview{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.page-huichang-in{
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.page_huichang-img {
	    min-width: 24upx;
	    max-width: 375upx;
	    min-height: 202upx;
	    max-height: 303upx;
	}
</style>
